<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title>人员组织结构</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="../../css/font.css">
  <link rel="stylesheet" href="../../css/xadmin.css">
  <link rel="stylesheet" href="../../src/css/layui.css">

  <!-- 引入公用JavaScript -->
  <script src="../../js/jquery.min.js"></script>
  <script src="../../js/app.js"></script>
</head>

<body>

  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>

  <div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-header">人员组织结构</div>
          <div class="layui-card-body">
            <div class="layui-row layui-col-space15">
              <div class="layui-col-md3">
                <!-- 人员树状结构 -->
                <div id="userTree" class="demo-tree demo-tree-box"></div>

              </div>
              <div class="layui-col-md9">
                <div class="layui-card-body layui-table-body layui-table-main">

                  <!-- 人员表格 -->
                  <table class="layui-hide" id="usersList" layui-filter="usersList"></table>
                  <div sytle="display: none;" id="usersListToolBar">
                    <div class="layui-btn-contaner">
                      <!-- <button <button type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新表格</button>  -->
                    </div>
                  </div>


                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

<script src="../../src/layui.js"></script>
<script>
  layui.use('layer', function () {
    var $ = layui.jquery,
      layer = layui.layer;

    var treeData = [];
    $(document).ready(function () {
      var id = app.getManagerId();
      var userState = app.getUserState();
      // console.log(userState);
      var type = 2; //管理员传type 2
      if (id === 'superManager') {
        type = 1; //超管理员传type 1 
      } else if (userState === '1' || userState === '2') {
        type = 3; //普通用户传type 3
        id = app.getUserGlobalInfo().roleId;
      }
      // console.log(id, type);
      $.ajax({
        url: app.ServerUrl + 'v1/role/getPersonRole',
        type: 'get',
        dataType: 'json',
        async: true,
        data: {
          id: id, //roleId和managerId经过后台表间联系，相互关联起来
          type: type
        },
        headers: {
          "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
        },
        success: function (data) {
          var treeValue = data.objs[0];

          function mapTree(org) {
            const haveChildren = Array.isArray(org.children) && org.children.length > 0;
            return {
              //分别将我们查询出来的值做出改变他的key
              title: org.role,
              id: org.roleId, //id即后台的roleId
              field: org.state,
              //判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
              children: haveChildren ? org.children.map(i => mapTree(i)) : []
            };
          }
          treeData.push(mapTree(treeValue));

          renderTree(treeData);
        },
        error: function (e) {
          layer.msg('操作失败');
        }
      })
    })
  })



  function renderTree(treeData) {
    layui.use(['tree', 'util', 'layer', 'table'], function () {

      var tree = layui.tree,
        layer = layui.layer,
        util = layui.util,
        table = layui.table,
        data = treeData;

      //常规用法
      tree.render({
        elem: '#userTree', //默认是点击节点可进行收缩 
        data: data,
        click: function (obj) {
          var value = obj.data; //得到当前点击的节点数据

          var type = value.field;
          var url = app.ServerUrl;
          var data = {};
          if (type === 1) {
            url += 'v1/user/getSupManagerBySupManagerId';
            data.managerId = value.id;
          } else if (type === 2) {
            url += 'v1/user/getCityManagerByManagerId';
            data.managerId = value.id;
          } else if (type === 3) {
            url += 'v1/user/getCityUserByRoleId';
            data.roleId = value.id;
          } else if (type === 4) {
            url += 'v1/user/getCountyUserByRoleId';
            data.roleId = value.id;
          } else if (type === 5) {
            url += 'v1/user/getCommonUserByRoleId';
            data.roleId = value.id;
          }

          var tableIns = table.render({
            elem: '#usersList',
            url: url,
            where: data,
            headers: {
              "Authorization": "460bcdb0-b326-4d6d-ac99-232c83ba6d80"
            },
            method: 'get',
            title: '人员表',
            toolbar: '#usersListToolBar',
            defaultToolbar: ['filter', 'print', 'exports'],
            cellMinWidth: 200,
            done: (res, curr, count) => {
              // console.log(res, curr, count);
              document.getElementById('usersList').innerHTML = '';
            },
            totalRow: true,
            page: true,
            limit: 10,
            limits: [5, 10, 20],
            text: {
              none: '暂无相关人员...'
            },
            parseData: function (res) {
              var result;
              if (this.page.curr) {
                result = res.objs[0].slice(this.limit * (this.page.curr - 1), this.limit * this.page
                  .curr);
              } else {
                result = res.objs[0].slice(0, this.limit);
              }
              // console.log(result);
              for (var i = 0; i < result.length; i++) {
                var item = result[i];
                if (item.sex == '0') {
                  item.sex = '女'
                } else if (item.sex == '1') {
                  item.sex = '男'
                }
              }

              return {
                "resultStatus": res.resultStatus,
                "resultIns": res.resultIns,
                "count": res.objs[0].length,
                "data": result
              }
            },
            response: {
              statusName: 'resultStatus',
              statusCode: 1,
              msgName: 'resultIns'
            },
            cols: [
              [{
                field: 'workId',
                title: '工号',
                sort: true,
                width: 250,
                align: "center"
              }, {
                field: 'username',
                title: '姓名',
                width: 210,
                align: "center"
              }, {
                field: 'sex',
                title: '性别',
                width: 210,
                align: "center"
              }, {
                field: 'age',
                title: '年龄',
                sort: true,
                width: 210,
                align: "center"
              }]
            ]
          })
        }
      });
    });
  }
</script>
<script type="text/javascript" src="../../js/xadmin.js"></script>

</html>